<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>晚风留言-修改作品</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/imgshow.css">
    <script src="../js/bootstrap.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
    <div id="app">


        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="../assets/logo.png" alt="" width="40" height="30" class="d-inline-block align-top">
                    晚风留言
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="../html/index.html" tabindex="-1"
                                aria-disabled="true">首页</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="../html/TimeShow.html">推荐</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="../html/AddArticle.html">添加作品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../html/myArticle.html">我的作品</a>
                        </li>



                    </ul>
                    <ul class="navbar-nav navbar-right">
                        <img style="border-radius:50%;" :src="selectuserdata.img" data-bs-toggle="modal"
                            data-bs-target="#exampleModal2" alt="" width="50" height="50"
                            class="d-inline-block align-top">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                你好:{{username}}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal"
                                        href="#" @click="selectuserbyname">修改个人信息</a></li>

                                <li><a class="dropdown-item" href="javascript:void(0)" @click="walkout">退出</a></li>

                            </ul>
                        </li>
                    </ul>

                    <form class="d-flex">

                        <input class="form-control me-6" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>

                    </form>
                </div>
            </div>
        </nav>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">修改个人信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">名称</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Name"
                                placeholder="请输入名称">
                        </div>
                        <!-- <div class="form-group">

                            <label for="exampleInputEmail1" class="form-label">电话</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Phone"
                                placeholder="请输入名称">

                        </div> -->

                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="name" v-model="selectuserdata.Email"
                                placeholder="请输入邮箱">
                        </div>

                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">密码</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.PassWord"
                                placeholder="请输入密码">
                        </div>


                        <div class="form-group">
                            <img style="border-radius:50%;" width="400px" :src="selectuserdata.img">
                        </div>


                    </div>
                    <div class="modal-footer">
                        <input type="file" @change="Filesuser">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary " @click="updateuser">保存</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">查看你的头像</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <img style="border-radius:50%;" width="400px" :src="selectuserdata.img">
                    </div>
                    <div class="modal-footer">
                        <input type="file" @change="Filesuser">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <!-- <button type="button" class="btn btn-primary">好的</button> -->
                    </div>
                </div>
            </div>
        </div>






        <div class="container">
            <div class="userreder">
                <div class="inputbox">
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">标题</label>
                        <input type="text" class="form-control" id="text" v-model="articledata.articlename"
                            aria-describedby="text">
                        <div id="emailHelp" class="form-text"> 输入你的作品名字
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="exampleInputEmail1" class="form-label">内容</label>
                        <textarea class="form-control" rows="13" style="min-width: 90%" aria-label="With textarea"
                            v-model="articledata.text"></textarea>
                    </div>

                    <div class="mb-3">

                        <input type="file" @change="Files">
                        <div id="emailHelp" class="form-text">如果不选择文件会默认原来的图片</div>

                    </div>
                    <button type="submit" class="btn btn-primary" @click="updateArticles">修改</button>
                    <button type="submit" class="btn btn-primary" @click="delectArticle">删除</button>
                </div>

            </div>

            <div class="articlenow">
                <div class="masonry">
                    <div class="item">
                        <img :src="this.articledata.Image" />
                        <h2>{{this.userarticledata.articlename}}</h2>
                        <p>
                            {{this.userarticledata.text}}
                        </p>
                    </div>
                </div>
            </div>






            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            法律说明
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <strong>网站上所有页面设计、页面内容的著作权人，对该网站所载、凡本网站未注明"来源的作品，包括但不限于网站所载的文字、数据、图形、照片、有声文件、动画文件、音视频资
                                料等拥有完整的版权</strong>
                            受著作权法保护。严禁任何媒体、网站、个人或组织以任何形式或出于任何目的在未经本公司书面授权的情况下抄袭、转载、摘编、修改本网站内容，或链接、转贴或以其他方式复制
                            用于商业目的或发行，<code>稍作修改后在其他网站上使用，前述行为均将构成对本网站版权之侵犯，本网站将依法追究其法律责任。</code>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            社区说明
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            严格遵守中华人民共和国版权法，任何转载都应注明真实作者和真实出处。</strong>
                            本网站有权在本网站范围内引用、发布、转载用户在本公司网站社区发布的内容。
                            本公司网站对于用户发布的内容所引发的版权、署名权的异议、
                            纠纷不承担任何责任。</code>传统媒体转载须事先与原作者和本公司网站联系。
                            提交者发言纯属个人行为，与本网站立场无关。
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            来源说明
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <strong>2022-Linson-前后端分离式开发留言板java Servlet+Vue+Axios.js+Bootstrap5.1css，开源作品</strong>
                            <a href="https://gitee.com/S88888888/message-board_-web-ui"><code>https://gitee.com/S88888888/message-board_-web-ui</code>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>







        <section class="p-5">
            <div class="container">
                <h2 class="text-center mb-4">联系我们</h2>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">电话：18888888888</li>
                    <li class="list-group-item">邮箱：Linson@gemali.com</li>
                    <li class="list-group-item">地址：你的心里</li>
                </ul>
            </div>
        </section>

        <footer class="p-5 bg-dark text-white text-center">
            <div class="container">
                <p class="lead">Copyright &copy; 2022 Linson开源作品</p>
            </div>
        </footer>







    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {

            articledata: {
                articlename: '',
                text: '',
                Image: '',
            },

            userarticledata: {
                articlename: '',
                text: '',
            },


            selectuserdata: {
                Id: '',
                Name: '',
                Phone: '',
                Email: '',
                passWord: '',
                img: ''

            },
            username: "未获取名字",
            returnText: '',

            imgdata: [],
            imgsrc: '',
            imgserlet: '',
            articleimg: ''
        },
        created() {
            this.selectArticleByid()
            this.selectuserbyname();
        },
        methods: {
            walkout() {
            localStorage.removeItem('token');
            localStorage.removeItem('phone');
            location.href = '../html/Login.html';
        },
            Files() {
                this.imgdata = event.target.files[0];
                let param = new FormData();
                param.append('image', this.imgdata);
                axios.post('https://www.imgtp.com/api/upload', param, {
                        headers: {
                            'token': 'fa6fca8ee47b678a3b055ac1daa72d47'
                        }
                    })
                    .then((response) => {
                        if (response.data.code == 200) {
                            this.articledata.Image = response.data.data.url;
                        } else {
                            alert("请上传照片")
                        }
                    })
                    .catch(function (error) {
                        alert(error)
                    });
            },
            selectArticleByid() {
                var url = window.location.href; //获取当前url
                let id = url.split("=")[1];
                let that = this;
                const token = window.localStorage.getItem('token');
                axios.get(
                        `http://localhost:8999/MessageBoard_war/Selectbyid?id=${id}`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    ).then(function (response) {
                        that.articledata = response.data.data;
                        that.userarticledata = that.articledata;
                    })
                    .catch(function (error) {
                        alert("请登录！")
                        location.href = '../html/Login.html';
                    });
            },
            updateArticles() {
                var url = window.location.href; //获取当前url
                let userid = url.split("=")[1];
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateArticle?articlename=${this.userarticledata.articlename}&text=${this.userarticledata.text}&img=${this.articledata.Image}&id=${userid}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        if (response.data.code = 200) {
                            alert("修改成功")
                        } else {
                            alert("失效了，请重新登录")
                        }
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },
            delectArticle() {
                var url = window.location.href; //获取当前url
                let userid = url.split("=")[1];
                const token = window.localStorage.getItem('token');
                axios.post(`http://localhost:8999/MessageBoard_war/deletearticle?id=${userid}`, {
                        headers: {
                            token: token
                        }
                    }).then(function (res) {
                        alert(error.data.data)
                    })
                    .catch(function (res) {
                        alert(error.data.data)
                    })
            },

            returnaticle() {
                if (this.returnText != "") {
                    location.replace(`../html/return.html?name=${this.returnText}`);
                }
            },
            getArticledata: function () {
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/getArticleData`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.Articledata = response.data.data;
                        } else {
                            alert(response.data.data, "用户验证失败");
                        }
                    })
            },
            selectuserbyname() {
                let that = this;
                const token = window.localStorage.getItem('token');
                const phone = window.localStorage.getItem('phone');
                axios({
                        method: 'get',
                        url: `http://localhost:8999/MessageBoard_war/Selectbyphone?phone=${phone}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        that.selectuserdata = response.data.data;
                        that.username = response.data.data.Name;

                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },

            updateuserimg() {
                const token = window.localStorage.getItem('token');
                const phone = window.localStorage.getItem('phone');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateuserimg?phone=${phone}&img=${this.selectuserdata.img}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        alert(response.data.data)
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });

            },
            Filesuser() {
                this.imgdata = event.target.files[0];
                let param = new FormData();
                param.append('image', this.imgdata);
                axios.post('https://www.imgtp.com/api/upload', param, {
                        headers: {
                            'token': 'fa6fca8ee47b678a3b055ac1daa72d47'
                        }
                    })
                    .then((response) => {
                        if (response.data.code == 200) {
                            this.selectuserdata.img = response.data.data.url;
                            this.updateuserimg();
                        } else {
                            alert("请上传照片")
                        }
                    })
                    .catch(function (error) {
                        alert(error)
                    });
            },

            updateuser() {
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateUser?name=${this.selectuserdata.Name}&email=${this.selectuserdata.Email}&password=${this.selectuserdata.PassWord}&id=${this.selectuserdata.id}&phone=${this.selectuserdata.Phone}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            alert("修改成功");
                        } else {
                            alert(response.data.data)
                        }
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },


        },

    })
</script>